<template>
  <div class="all">
    <div class="title">
      <div>{{ title }}</div>
      <div>
        <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
        <el-button v-if="roles.includes('AssetFacilityEdit')" type="danger" icon="el-icon-delete" @click="delBtn">删除</el-button>
        <el-button v-if="roles.includes('AssetFacilityEdit')" type="primary" icon="el-icon-document-checked" @click="submitForm('form')">保存</el-button>
      </div>
    </div>
    <div class="detail-mid">
      <el-form ref="form" v-loading="loading" :model="data" :rules="rules" inline>
        <el-row>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.coding')" prop="coding">
              <el-input v-model="data.coding" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.name')" prop="name">
              <el-input v-model="data.name" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.factory')" prop="factory_id">
              <Selects v-model="data.factory_id" action="factoryList" :query="{ category: 1 }" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.workshop')" prop="workshop_id">
              <Selects v-model="data.workshop_id" action="factoryList" :query="{ category: 2 }" @change="getWorkshop" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item v-if="editId" :label="$t('app.asset.equipment.line')" prop="line_id">
              <Selects v-model="data.line_id" action="factoryList" :query="{ workshop_id: workshop_id, category: 3 }" :refresh="false" />
            </el-form-item>
            <el-form-item v-else :label="$t('app.asset.equipment.line')" prop="line_id">
              <Selects v-model="data.line_id" action="factoryList" :query="{ workshop_id: workshop_id, category: 3 }" refresh />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item v-if="editId" :label="$t('app.asset.equipment.process')" prop="process_id">
              <Selects v-model="data.process_id" action="factoryList" :query="{ category: 4, line_id: line_id }" :refresh="false" />
            </el-form-item>
            <el-form-item v-else :label="$t('app.asset.equipment.process')" prop="process_id">
              <Selects v-model="data.process_id" action="factoryList" :query="{ category: 4, line_id: line_id }" refresh />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.position')">
              <el-input v-model="data.position" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.firstCategory')" prop="first_category_id">
              <Velects v-model="data.first_category_id" action="equipmentCategoryList" :query="{ level: 1 }" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.category')" prop="category_id">
              <Velects v-model="data.category_id" action="equipmentCategoryList" :query="{ level: 2, parent_id: data.first_category_id }" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.parent')">
              <Selects v-model="data.parent_id" action="equipmentList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.cost')">
              <Selects v-model="data.cost_id" action="costList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.provider')">
              <Selects v-model="data.provider_id" action="providerList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.manufacturer')">
              <Selects v-model="data.manufacturer_id" action="providerList" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.usedGroup')">
              <Selects v-model="data.used_group_id" action="departmentList" :query="{ category: 4 }" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.brand')">
              <el-input v-model="data.brand" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.spec')">
              <el-input v-model="data.spec" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="设备类别">
              <el-input v-model="data.serialize" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.manufacture')">
              <el-date-picker v-model="data.manufacture_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.purchase')">
              <el-date-picker v-model="data.purchase_date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.guarantee')">
              <el-input v-model="data.guarantee" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.price')">
              <el-input v-model="data.price" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="原值">
              <el-input v-model="data.original_value" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.power')">
              <el-input v-model="data.power" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.motor')">
              <el-input v-model="data.motor" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.weight')">
              <SelfSelect v-model="data.weight" :show-list="eqWeight" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.fun')">
              <SelfSelect v-model="data.fun" :show-list="eqFun" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.status')" prop="status">
              <SelfSelect v-model="data.status" :show-list="eqStatus" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.hb')" prop="hb">
              <SelfSelect v-model="data.hb" :show-list="YN" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.asset.equipment.special')" prop="special">
              <SelfSelect v-model="data.special" :show-list="YN" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('app.sort')" prop="sort">
              <el-input v-model="data.sort" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="detail-bottom">
      <el-tabs>
        <el-tab-pane :label="$t('app.description')">
          <el-row v-if="editId" :gutter="20" style="padding: 2px">
            <el-col :span="4">
              <div>
                <p>{{ $t('app.createTime') }}</p>
                <el-input v-model="data.create_time" readonly />
              </div>
              <div>
                <p>{{ $t('app.createAdmin') }}</p>
                <el-input v-model="data.create_admin" readonly />
              </div>
              <div v-if="data.update_time">
                <p>{{ $t('app.updateTime') }}</p>
                <el-input v-model="data.update_time" readonly />
                <p>{{ $t('app.updateAdmin') }}</p>
                <el-input v-model="data.update_admin" readonly />
              </div>
            </el-col>
            <el-col :span="16">
              <TinyMce v-model="data.content" />
            </el-col>
            <el-col class="upload" :span="4">
              <Adjunct :pk="editId" table="facility" />
            </el-col>
          </el-row>
          <el-row v-if="!editId" :gutter="20" style="padding: 2px">
            <el-col :span="24">
              <TinyMce v-model="data.content" />
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane v-if="editId" :label="$t('app.asset.equipment.knowledge')">
          <div class="detail-table">
            <el-collapse accordion>
              <el-collapse-item v-for="(item,index) in data.knowledge_list" :key="index" :title="item.name">
                <div v-for="(i, kIndex) in item.list" :title="i.name" :key="kIndex" :name="kIndex + 1">
                  <div class="knowledge-url" v-for="(is,sIndex) in i.knowledges" :key="sIndex">
                    <a v-if="is.base_url === 1" :href="'http://beiqi.aiemtc.com' + is.path" target="_blank"><p>{{ is.name.split('/')[is.name.split('/').length - 1] }}</p></a>
                    <a v-if="is.base_url === 2" :href="is.path" target="_blank"><p>{{ is.name.split('/')[is.name.split('/').length - 1]}}</p></a>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="editId" :label="$t('app.asset.equipment.spares')">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.parts_list">
              <el-table-column prop="coding" label="备件" align="left" />
              <el-table-column prop="halt" label="型号" align="left" />
              <el-table-column prop="task_long" label="注意" align="left" />
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="editId" :label="$t('app.asset.equipment.plans')">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.plan_list">
              <el-table-column prop="coding" label="编号" align="left" />
              <el-table-column prop="halt" label="停机" align="left" />
              <el-table-column prop="task_long" label="任务时长" align="left" />
              <el-table-column prop="execute_time" label="执行时间" align="left" />
              <el-table-column prop="period" label="周期" align="left" />
              <el-table-column prop="period_unit" label="周期单位" align="left" />
              <el-table-column prop="status" label="状态" align="left" />
              <el-table-column prop="monitor" label="班长审核" align="left" />
              <el-table-column prop="engineer" label="工程师审核" align="left" />
              <el-table-column prop="category" label="任务类型" align="left" />
              <el-table-column prop="admin" label="负责人" align="left" />
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane v-if="editId" :label="$t('app.asset.equipment.cmOrders')">
          <div class="detail-table">
            <el-table ref="multipleTable" tooltip-effect="dark" width="100%" :data="data.failure_list">
              <el-table-column prop="part" label="部位" align="left" />
              <el-table-column prop="times" label="次数" align="left" />
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import API from '@/api/asset/equipment'
import SelfSelect from '@/components/select-o'
import Selects from '@/components/select-search'
import Velects from '@/components/select'
import { eqFun, eqWeight, eqStatus, eqType, YN } from '@/utils/option'
import TinyMce from '@/components/Tinymce/index'
import Adjunct from '@/components/Upload/adjunct'
import { mapGetters } from 'vuex'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update'],
  components: {
    Adjunct,
    SelfSelect,
    TinyMce,
    Velects,
    Selects
  },
  data() {
    return {
      data: {
        factory_id: 90,
        sort: 100,
        status: 1,
        type: 3,
        workshop_id: null,
        line_id: null
      },
      editId: null,
      title: '',
      loading: true,
      eqFun,
      workshop_id: null,
      YN,
      eqWeight,
      eqStatus,
      eqType,
      rules: {
        coding: { required: true, message: '请输入设备编号', trigger: 'change' },
        name: { required: true, message: '请输入设备名称', trigger: 'change' },
        sort: { required: true, message: '请输入排序', trigger: 'change' },
        factory_id: { required: true, message: '请选择工厂', trigger: 'change' },
        workshop_id: { required: true, message: '请选择车间', trigger: 'change' },
        line_id: { required: true, message: '请选择生产线', trigger: 'change' },
        process_id: { required: true, message: '请选择工位', trigger: 'change' },
        position: { required: true, message: '请输入位置', trigger: 'change' },
        first_category_id: { required: true, message: '请选择一级分类', trigger: 'change' },
        category_id: { required: true, message: '请选择二级分类', trigger: 'change' },
        parent_id: { required: true, message: '请输入上级设备', trigger: 'change' },
        cost_id: { required: true, message: '请输入成本中心', trigger: 'change' },
        provider_id: { required: true, message: '请输入供应商', trigger: 'change' },
        manufacturer_id: { required: true, message: '请输入制造商', trigger: 'change' },
        brand: { required: true, message: '请输入品牌', trigger: 'change' },
        spec: { required: true, message: '请输入型号', trigger: 'change' },
        serialize: { required: true, message: '请输入设备类别', trigger: 'change' },
        purchase_date: { required: true, message: '请输入购置日期', trigger: 'change' },
        guarantee: { required: true, message: '请输入保质期', trigger: 'change' },
        manufacture_date: { required: true, message: '请输入生产日期', trigger: 'change' },
        price: { required: true, message: '请输入购置价格', trigger: 'change' },
        power: { required: true, message: '请输入功率', trigger: 'change' },
        motor: { required: true, message: '请输入电机数', trigger: 'change' },
        weight: { required: true, message: '请输入关键性', trigger: 'change' },
        fun: { required: true, message: '请输入资产性质', trigger: 'change' },
        status: { required: true, message: '请选择状态', trigger: 'change' },
        type: { required: true, message: '请输入类型', trigger: 'change' },
        hb: { required: true, message: '请选择是否为环保设备', trigger: 'change' },
        special: { required: true, message: '请选择是否为特种设备', trigger: 'change' },
        used_group_id: { required: true, message: '请输入岗位', trigger: 'change' }
      }
    }
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = this.$t('route.asset.facility.edit')
      this.editId = edit
      this.info()
    } else {
      this.loading = false
      this.title = this.$t('route.asset.facility.create')
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  methods: {
    goBack() {
      this.$router.push('/asset/facility')
    },
    info() {
      API.getOne(this.editId).then(res => {
        this.data = res.data
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    getWorkshop() {
      this.workshop_id = this.data.workshop_id
    },
    delBtn() {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = this.editId
        API.delete(id).then(res => {
          if (res.data.error_code !== 1) {
            this.$message.error(res.data.message)
          } else {
            this.$message.success('删除成功')
            this.goBack()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    submitForm() {
      if (this.editId) {
        this.update(API, this.data, this.$refs['form'], '/asset/facility')
      } else {
        this.add(API, this.data, this.$refs['form'], '/facility/edit/')
      }
    }
  }
}
</script>
